<template>
  <div class="orderManage">
      <SearchBar @refresh="refresh" :isDel="false"/>
      <TableTreeList 
        :tableCols="tableCols"
        :tableData="tableData"
        :isOperates="false"
        :enableEdit="true"
        ref="list"
        @handleSelect="handleSelect"/>
      <pagination :pageData="pageList" @change="pageChange" />
  </div>
</template>
<script>
import TableTreeList from "@/components/index/tableTreeList";
import pagination from "@/components/index/pagination";
import SearchBar from "@/components/index/SearchBar";
import { findAllOrder } from "@/js/api/manage"; 
export default {
  name:'orderManage',
  components:{
    TableTreeList,
    SearchBar,
    pagination,
  },
  data(){
    return {
      tableCols: [
        { label: "订单号", prop: "order_id",minWidth:'80px', edit:false},
        { label: "所属用户", prop: "user_name",minWidth:'50px', edit:false},
        { label: "商品信息", prop: "lists",minWidth:'100px', edit:false,
          render(h,params) {
            let arr = params.row.lists
            return h('div',{},arr.map((item)=>{
                return h("div",{
                  attrs:{
                    class:'bomBorder'
                  },
                  domProps:{
                    innerHTML:`
                      <p>商品id：<span>${item.goods_id}</span></p>
                      <p>商品名称：<span>${item.goods_name}</span></p>
                      <p>商品数量：<span>${item.goods_nums}</span></p>
                      <p>商品原价格：<span>${item.goods_price}</span></p>
                      <p>总价格：<span>${parseInt(item.goods_price)*parseInt(item.goods_nums)}</span></p>
                    `
                  },
                }
              );
            }))
            
          }, 
        },
        { label: "总金额", prop: "payment",minWidth:'30px', edit:false},
        { label: "支付方式", prop: "payment_type",minWidth:'30px', edit:false,
          render(h,params) {
            return h("span",{
              domProps:{
                innerHTML:params.row.payment_type == '1' ? '支付宝' : '微信'
              },
            })
          }, 
        },
        { label: "是否支付", prop: "state",minWidth:'30px', edit:false,
          render(h,params) {
            return h("span",{
              domProps:{
                innerHTML:params.row.state == '1' ? '未支付' : '已付款'
              },
            })
          }
        },
        { label: "支付时间", prop: "payment_time",minWidth:'70px', edit:false },
        { label: "操作", prop: "state",minWidth:'70px', edit:false,
          render(h,params) {
            let eleArr = []
            if(params.row.state == 1){
              eleArr = [
                h("el-tag",{
                  props:{
                    type:'danger'
                  },
                  style:{
                    'cursor': 'pointer',
                    'margin-left':'5px'
                  },
                  domProps:{
                    innerHTML:'等待支付'
                  },
                })
              ]
            }else{
              eleArr = [
                h("el-tag",{
                  prop:{type:'success'},
                  style:{'cursor': 'pointer'},
                  domProps:{innerHTML:'已支付'},
                }),
              ]
            }
            return h("div",eleArr)
          }
        },
      ],
      tableData:[],
      selectRow:[],
      pageList:{pageSize:4,pageNo:1,total:10},
    }
  },
  created(){
    this.loadList()
  },
  methods:{
    loadList(){
      let obj = {
        pageNo:this.pageList.pageNo,
        pageSize:this.pageList.pageSize,
        search:this.condition
      }
      findAllOrder(obj).then(response=>{
        if(response.data.state){
          this.tableData = response.data.data.list ? response.data.data.list : []
          this.pageList.pageNo = response.data.data.pageNo
          this.pageList.pageSize = response.data.data.pageSize
          this.pageList.total = response.data.data.totalRecords
        }
      })
    },
    handleSelect(selection, row){
      this.selectRow = row
    },
    pageChange(obj){
      if(obj){
        this.pageList = obj
      }
      this.loadList()
    },
    refresh(val){
      this.condition = val
      this.loadList()
    },
  }
}
</script>

<style lang="less">
.orderManage{
  .bomBorder{
    font-size: 1px;
    border: 1px solid #ccc;
  }
}
</style>